class Tab {
    constructor() {
        this.lefta = document.querySelectorAll('.left>ul>li')
        this.ola = document.querySelectorAll('.left>ol>li')
        this.boxa = document.querySelectorAll('.box2>ul>li')
        this.ul = document.querySelector('.left>ul')
        this.span = document.querySelector('.left>ul>span')
        this.box2 = document.querySelector('.box2')
        this.left = document.querySelector('.left')
        this.pic = document.querySelectorAll('.box2>ul>li>img')
        this.click()
        this.over()
        this.out()
        this.move()
    }
    click() {
        this.ola.forEach((item, index) => {
            item.addEventListener('click', () => {

                this.ola.forEach((res, name) => {
                    res.className = ''
                    this.lefta[name].className = ''
                    this.boxa[name].className = ''
                })
                this.ola[index].className = 'show'
                this.lefta[index].className = 'active'
                this.boxa[index].className = 'active'
            })
        })
    }
    over() {
        this.ul.onmouseover = () => {
            this.box2.style.display = 'block'
            this.span.style.display = 'block'
        }
    }
    out() {
        this.ul.onmouseout = () => {
            this.box2.style.display = 'none'
            this.span.style.display = 'none'
        }
    }
    move() {
        this.ul.onmousemove = (e) => {
            var e = e || window.event
            let x = e.pageX - this.left.offsetLeft - this.span.offsetWidth / 2
            let y = e.pageY - this.left.offsetTop - this.span.offsetHeight / 2
            if (x <= 0) {
                x = 0
            } else if (x >= this.ul.offsetWidth - this.span.offsetWidth) {
                x = this.ul.offsetWidth - this.span.offsetWidth
            }

            if (y <= 0) {
                y = 0
            } else if (y >= this.ul.offsetHeight - this.span.offsetHeight) {
                y = this.ul.offsetHeight - this.span.offsetHeight
            }
            //给mask赋值
            this.span.style.left = x + 'px'
            this.span.style.top = y + 'px'
            //计算比例
            let w = x / (this.ul.offsetWidth - this.span.offsetWidth)
            let h = y / (this.ul.offsetHeight - this.span.offsetHeight)
            //给pic赋值
            this.pic.forEach((item,index)=>{
            item.style.left=-w * (this.pic[index].offsetWidth - this.box2.offsetWidth) + 'px'
            item.style.top=-h * (this.pic[index].offsetHeight - this.box2.offsetHeight) + 'px'
            })
        }
    }

}
new Tab()